<template>
  <div>
    <svg id="markmap" style="width: 300px;height: 300px;"></svg>
  </div>
</template>

<script>
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

export default {
  name: 'MarkdownRenderer',
  props: {
    content: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.renderMarkmap();
  },
  watch: {
    content() {
      this.$nextTick(this.renderMarkmap());
    },
  },
  methods: {
    renderMarkmap() {
      if (!this.content) return;

      const transformer = new Transformer();
      const { root } = transformer.transform(this.content);
      Markmap.create('#markmap',null, root)
    },
  },
};
</script>